<template>
<el-dialog :title="optionData.title" :width="optionData.width||'50%'"
 :visible.sync="isShow" :close-on-click-modal="false" @close="close" class="modal-box">

  <slot name="main" :data="optionData.content"></slot>

  <div slot="footer" class="dialog-footer" v-if="optionData.footerText">
    <el-button :type="sub.btnType"
    @click="clickButton(sub)"  v-for="(sub,i) in optionData.footerText" :key="i">
    {{sub.text}}
  </el-button>
    <!-- <el-button type="primary" @click="dialogFormVisible = false">{{modalData.btnText[1].text}}</el-button> -->
  </div>
</el-dialog>

</template>
<script>
export default {
  data() {
    return {
      title:"收货地址",
      form: {
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      isShow:this.dialogVisible,
      optionData:this.modalData
    }
  },
  props: {
    modalData: {
      type: Object
    },
    dialogVisible:{}
  },
  watch: {
    modalData: function(optionData) {
      this.optionData = optionData
    },
    dialogVisible: function(optionData) {
      this.isShow = optionData
    }
  },
  methods: {
    clickButton(v){
      this.$emit('watchModal',v);
    },
    close(){
      this.$emit('watchModal',false);
    }
  },
}
</script>
<style lang="less" scoped>
.el-select{
  width:100%;
}
.el-form-item__label{
  text-align:right;
}
.el-range-editor.el-input__inner{
  width:100%;
}

</style>
<style lang="less">
.modal-box{
  .el-range-editor.el-input__inner{
    width:100%;
  }
  .el-dialog__header{
    text-align: center  !important;
  }
  .el-dialog__header>span{
    position:relative !important;
  }
  .el-dialog__header>span::before{
    content:'';
    display:inline-block;
    width:3px;
    height:18px;
    background:#0099ff;
    position: absolute;
    left: -10px;
    top: 4px;
  }
  .el-dialog__footer{
    border-top: 1px solid #eeeeee;
    padding: 15px 20px;
  }
}
</style>
